<template>
  <div class="full-width">
    <div
      id="intro"
      :style="{'background-image': 'url(' + state.detail1.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 bg_img min-width-130">
      <div class="width-110 mx-auto">
        <p class="text-orange text-80">{{state.detail1.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div class="sp_m mx-auto width-110 px-16 py-38 bg-gray-light3 rounded-15">
      <div class="rockTextDesc" v-html="state.detail1.rockTextDesc"></div>
    </div>
    <div id="manager" class="width-110 mx-auto my-40">
      <div class="flex-column">
        <img class="width-9 mb-4" :src="HomePart2" alt="02">
        <span class="text-orange text-48">{{state.detail2.name}}</span>
        <span class="text-gray-light">{{lang === 'zh_CN' ? '管理团队': 'Manage Team'}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div class="flex_between_start mt-10 sp_m">
        <div class="out of-hidden flex-column rounded-10 bg-gray-light3 width-40 height-74">
          <img class="width-40" :src="state.detail2.logo" alt="manager">
          <div class="pt-14 px-7">
            <p class="text-32 text-black-light2">{{lang === 'zh_CN' ? '甘醇': 'ChunGan'}}</p>
            <p class="text-black-light3">{{lang === 'zh_CN' ? '董事长&创始人': 'Chairman&Founder'}}</p>
          </div>
          <p class="text-gray-light pb-5 px-7 mt-10">KUPO TECHNOLOGY ..</p>
        </div>
        <div class="width-60 rockTextDesc" v-html="state.detail2.rockTextDesc"></div>
      </div>
    </div>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import HomePart2 from '@/assets/images/HomePart2.png'
import { onMounted, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import userStore from '@/store/index'
import urls from '@/api/index'

const router = useRouter()
const state = reactive({
  detail1: {},
  detail2: {}
})
const lang = computed(() => userStore.state.lang)
watch(() => router.currentRoute.value.query.id, (newVal) => {
  if (router.currentRoute.value.query.id === '62d6bf7de1d8375b113f70a7') {
    const manager = document.getElementById('manager')
    manager.scrollIntoView()
  } else {
    const intro = document.getElementById('intro')
    intro.scrollIntoView()
  }
})
watch(() => userStore.state.lang, () => {
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params1 = {
    id: '62d6bf34e1d8375b113f70a3',
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params1)
    .then(res => {
      state.detail1 = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
  const params2 = {
    id: '62d6bf7de1d8375b113f70a7',
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params2)
    .then(res => {
      state.detail2 = res.data
    })
    .catch(err => {
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  getDetail()
  if (router.currentRoute.value.query.id === '62d6bf7de1d8375b113f70a7') {
    const manager = document.getElementById('manager')
    manager.scrollIntoView()
  } else {
    const intro = document.getElementById('intro')
    intro.scrollIntoView()
  }
})
</script>

<style lang="scss">
.bg_img {
  background: url("@/assets/images/introduce.jpg") no-repeat;
  background-size: 100%;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}
</style>
